import React, { useEffect } from "react";
import Footer from "./components/Footer";
// import { Switch, Route } from "react-router-dom";

// import axios from "axios";

// import http from "../../utils/http";
// import { ratedApi } from "../../utils/api";

import { useSelector, useDispatch } from "react-redux";

// const mapStateToProps = (state) => {
//   return {
//     count: state.count,
//   };
// };
// const mapDispatchToProps = (dispatch) => {
//   return {
//     add() {
//       dispatch({
//         type: "add",
//       });
//     },
//   };
// };

const Index = () => {
  // const [list, set_list] = useState([]);
  // useSelector要传入一个函数
  const count = useSelector((state) => state.count);
  const list = useSelector((state) => state.list);
  const dispatch = useDispatch();
  // useEffect(() => {
  // axios
  //   .get("http://www.pudge.wang:3080/api/rated/list", {
  //     params: {},
  //   })
  //   .then((res) => {
  //     set_list(res.data.result);
  //   })
  //   .catch((error) => {
  //     console.log(error);
  //   });

  // http.get().then((res) => {
  //   set_list(res.result);
  // });

  //   (async () => {
  //     const res = await ratedApi({ a: 3 });
  //     set_list(res.result);
  //   })();
  // }, []);

  useEffect(() => {
    dispatch({ type: "loadList" });
  }, [dispatch]);

  return (
    <>
      {/* <Switch></Switch> */}
      <button
        onClick={() =>
          dispatch({
            type: "minus",
          })
        }
      >
        -
      </button>
      <span>{count}</span>
      <button
        onClick={() =>
          dispatch({
            type: "add",
          })
        }
      >
        +
      </button>

      {list.map((item) => (
        <div key={item._id}>{item.title}</div>
      ))}
      <Footer />
    </>
  );
};

export default Index;
